<template>
  <div class="person-id">
    _id: {{$route.params.id}}
    <div class="title">hello {{curName}}</div>
    <div>{{tianqi.country}}-{{tianqi.city}}-{{tianqi.data[0].tem}}-{{tianqi.data[0].wea}}</div>
    <ul>
      <li v-for="(name, index) in list" :key="index" @click="curName = name">
        <span>{{name}}</span>
        <i class="el-icon-delete" @click="del(index, $event)"></i>
      </li>
    </ul>
    <el-input v-model="addName"></el-input>
    <el-button @click="add">add</el-button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
  async asyncData({ $axios }: any) {
    const tianqi = await $axios.$get(
      "https://www.tianqiapi.com/api/?version=v1&cityid=&appid=35768629&appsecret=9DNvpbQl"
    );
    return { tianqi };
  }
})
export default class PersonId extends Vue {
  list: Array<any> = ["张三"];
  curName: string = "张三";
  addName: string = "";

  created() {}
  add() {
    console.log(this);
    this.list.push(this.addName);
  }
  del(index: number, e: any) {
    e.stopPropagation();
    this.list.splice(index, 1);
  }
}
// export default {
//   async asyncData({ $axios }) {
//     const tianqi = await $axios.$get(
//       "https://www.tianqiapi.com/api/?version=v1&cityid=&appid=35768629&appsecret=9DNvpbQl"
//     );
//     return { tianqi };
//   },
//   data() {
//     return {
//       list: ["张三"],
//       curName: "张三",
//       addName: ""
//     };
//   },
//   created() {},
//   methods: {
//     add() {
//       console.log(this);
//       this.list.push(this.addName);
//     },
//     del(index) {
//       event.stopPropagation();
//       this.list.splice(index, 1);
//     }
//   }
// };
</script>
<style lang="scss" scoped>
.person-id {
  margin-top: 20px;
  .title {
    font-size: 26px;
    font-weight: bold;
  }
}
</style>
